<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的车辆	" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #F2F3F5;">

			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="uni-flex-center" v-for="(item, index) in carList">


				<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view class="title">
							<view style="float: left; color: #666666; ">
								<text>{{item.house}}</text>
							</view>
							<view v-if="item.status==1" style="float: right; margin-right: 20rpx; color: #00aa00; font-weight: 400;">
								<text>{{item.status_label}}</text>
							</view>
							<view v-else style="float: right; margin-right: 20rpx; color: #666666; font-weight: 400;">
								<text>{{item.status_label}}</text>
							</view>

						</view>
						<u-line></u-line>
						<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
							<view class="d_view">
								{{item.number}} (停车场{{item.park}})
							</view>

						</view>
						<u-line></u-line>
						<view style="text-align: right;padding:20rpx 0;">
							<view class="del_con" style="background-color:#0B868E;color:#fff;" @click="detail(item.id,item)">查看详情</view>
							<view class="del_con" @click="intoBind(item.id, item)" v-if="item.status==0">编辑</view>
							<view class="del_con" @click="intoDel(item.id, item)" v-if="item.status!=0">删除</view>
						</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="showmodal" :showCancelButton="true" confirmColor="#0B868E"
			:closeOnClickOverlay="true" :title='content' @close="showmodal=false" @cancel="showmodal=false" @confirm="confirm"></u-modal>
			<u-button :customStyle="btnStyle" @click="intoBind(0)">绑定车辆</u-button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getCar,delCar
	} from "@/service/userService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginTop: '40rpx',
					marginBottom: '40rpx',
					backgroundImage: "url('https://s4.ax1x.com/2022/02/22/HxzlJf.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待审核'
					},
					{
						name: '审核通过'
					},
					{
						name: '未通过'
					}
				],
				carList: [],
				showDel: false,
				showEmpty: false,
				showmodal:false,
				id:0,
				content:''
			}
		},
		onLoad() {
			getCar().then(this.getCar);
		},
		methods: {
			getCar(e) {
				// console.log(e);
				if (e.code == 200) {
					this.showEmpty = false;
					this.carList = e.result;
				} else {
					this.showEmpty = true;
					this.carList = [];
				}
			},
			changeTabs(e) {
				let par;
				// console.log(e);
				this.current = e.index;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						break;
					case 2:
						par = {
							status: 1
						};
						break;
					case 3:
						par = {
							status: -1
						};
						break;
					default:
						par = {
							status: 99
						};
				}
				getCar(par).then(this.getCar);
			},
			intoBind(id, item) {
				this.$u.route({
					url: 'pagesMine/car/bind',
					params: {
						cid: id,
						item: JSON.stringify(item)
					}
				})
			},
			detail(id,item){
				this.$u.route({
					url: 'pagesMine/car/detail',
					params: {
						cid: id,
						item: JSON.stringify(item)
					}
				})
			},
			intoDel(id,item){
				this.showmodal=true
				this.content='您确定要删除 ' +item.number+' 的信息吗？';
				this.id=id;
			},
			confirm(){
				delCar({
					id:this.id
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								
							}
						})
						getCar().then(this.getCar);
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.d_view {
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	.del_con{
		display: inline-block;
		font-size: 28rpx;
		color:#0B868E;
		padding:3rpx 30rpx;
		border-radius: 27rpx;
		margin-right:20rpx;
		border:1rpx solid #0B868E;
	}
</style>
